<html xmlns:th="https://www.thymeleaf.org">
  <head>
    <title>SecureMail</title>
    <link rel="icon" type="image/x-icon" th:href="@{/resources/img/favicon.ico}"/>
    <link th:href="@{/resources/css/bootstrap.css}" rel="stylesheet"></link>
    <style type="text/css">
      /* Sticky footer styles
      -------------------------------------------------- */

      html,
      body {
        height: 100%;
        /* The html and body elements cannot have any padding or margin. */
      }

      /* Wrapper for page content to push down footer */
      #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -60px;
      }

      /* Set the fixed height of the footer here */
      #push,
      #footer {
        height: 60px;
      }
      #footer {
        background-color: #f5f5f5;
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }



      /* Custom page CSS
      -------------------------------------------------- */
      /* Not required for template or sticky footer method. */

      .container {
        width: auto;
        max-width: 680px;
      }
      .container .credit {
        margin: 20px 0;
        text-align: center;
      }
      a {
          color: green;
      }
      .navbar-form {
        margin-left: 1em;
      }
    </style>
    <link th:href="@{/resources/css/bootstrap-responsive.css}" rel="stylesheet"></link>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>
  </head>


  <body>
    <div id="wrap">
      <div class="navbar navbar-inverse navbar-static-top">
        <div class="navbar-inner">
          <div class="container">
            <a class="brand" th:href="@{/}"><img th:src="@{/resources/img/logo.png}" alt="Spring Security Sample"/></a>
            <div class="nav-collapse collapse">
              <div th:if="${#httpServletRequest.remoteUser != null}">
                  <form class="navbar-form pull-right" th:action="@{/logout}" method="post">
                      <input type="submit" value="Log out" />
                  </form>
                  <p class="navbar-text pull-right" th:text="${#httpServletRequest.remoteUser}">
                    sample_user
                  </p>
              </div>
              <ul class="nav">
                <li><a data-bind="click: $root.goToInbox" th:href="@{/}">Inbox</a></li>
                <li><a data-bind="click: $root.goToCompose" th:href="@{/(form)}">Compose</a></li>
              </ul>
            </div>
          </div>
      </div>
    </div>
      <!-- Begin page content -->
      <div class="container">
        <div data-bind="with: inbox">
            <h1>Inbox</h1>
            <table class="table">
                <thead>
                    <tr>
                        <th>Created</th>
                        <th>Summary</th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: $root.messages">
                    <tr data-bind="click: $root.goToMessage">
                        <td data-bind="text: created"></td>
                        <td><a data-bind="text: summary, attr: { href: id}"></a></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div class="container" data-bind="with: chosenMessageData">
              <h1>Message : <span data-bind="text: summary"></span></h1>
              <dl>
                  <dt>Created</dt>
                  <dd data-bind="text: created"></dd>
                  <dt>Message</dt>
                  <dd data-bind="html: text"></dd>
              </dl>
          </div>

          <div class="container" data-bind="with: compose">
                <h1>Messages : Create</h1>
                <div class="alert alert-error" data-bind="foreach: $root.errors, visible: $root.errors().length">
                    <p data-bind="text: $data"></p>
                </div>
               <form action="./" method="post">
                    <label for="summary">Summary</label>
                    <input type="text" id="summary" data-bind="value: summary" name="summary" class="input-xxlarge" />
                    <label for="text">Message</label>
                    <textarea name="text" id="text" data-bind="value: text" class="input-xxlarge"><!--  --></textarea>
                    <div class="form-actions">
                        <input type="button" data-bind="click: $root.save" value="Create" />
                    </div>
                </form>
            </div>
      </div>

      <div id="push"><!--  --></div>
    </div>
    <div id="footer">
      <div class="container">
        <p class="muted credit">Visit the <a href="#">Spring Security</a> site for more <a href="#">samples</a>.</p>
      </div>
    </div>

    <script type="text/javascript" th:src="@{/resources/js/jquery-1.8.3.js}"><!-- --></script>
    <script type="text/javascript" th:src="@{/resources/js/knockout-2.3.0.js}"><!-- --></script>
    <script type="text/javascript" th:src="@{/resources/js/message.js}"><!-- --></script>
  </body>
</html>